<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-04-17 09:56:46
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-06-20 15:19:27
 * @FilePath: \questionnaire-system-admin\src\components\Common\Pagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 翻页器的页码等全部在缓存pageQuery中存取 -->
<template>
  <div class="pageBox">
    <el-row justify="space-between" class="align-items">
      <el-col :span="6">
        <div>共 {{ props.total }} 项数据</div>
      </el-col>
      <el-col :span="18" style="text-align: right;">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" background
          layout="sizes,prev,pager, next" :total="props.total" :page-sizes="[10, 20, 100, 200, 300, 400]"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeUnmount, onMounted, onUnmounted } from 'vue'
import { PiniaStore } from '../../store'
const store = PiniaStore()
const pagRef = ref<any>(null)
interface PropsType {
  //   总条数
  total?: number | string
  // 排列，可选值center/flex-end/flex-start
  align?: string
  page?: any
  page_size?: any
}
const props = withDefaults(defineProps<PropsType>(), {
  total: 100,
  page: 0,
  page_size: 0,
  align: ''
})
interface EmitType {
  (e: 'sizeChange', num?: number): void
  (e: 'CurrentChange', num?: number): void
}
const emit = defineEmits<EmitType>()
const pageSize = ref(0)
const currentPage = ref(0)
const handleSizeChange = (val: number) => {
  store.setPageQueryPageSize(val)
  if (props.page === 0) {
    emit('sizeChange')
  } else {
    emit('sizeChange', val)
  }
}
const handleCurrentChange = (val: number) => {
  store.setPageQueryPage(val)
  if (props.page === 0) {
    emit('CurrentChange')
  } else {
    emit('CurrentChange', val)
  }
}
onBeforeUnmount(() => {
  store.setRefreshPage()
})
onMounted(() => {
  if (props.page !== 0) {
    pageSize.value = props.page_size
    currentPage.value = props.page
  } else {
    pageSize.value = store.pageQuery.page_size
    currentPage.value = store.pageQuery.page
  }
})
</script>
<style lang="scss" scoped>
.pageBox {
  padding: 15px;
  position: absolute;
  bottom: 0px;
  box-sizing: border-box;
  width: -webkit-fill-available;
  background: #ffffff;
  z-index: 99;

  .el-pagination {
    justify-content: flex-end;
  }
}
</style>
<style lang="scss">
.el-pagination__editor.el-input {
  width: 35px !important;

  .el-input__wrapper {
    padding: 1px;
  }
}

.el-pagination__editor {
  min-width: 35px !important;
}
.el-pagination .el-select .el-input {
  width: 108px;
}
.el-pagination button{
  height: 28px;
  min-width: 30px
}
.el-pagination .el-input__wrapper{
  height: 26px;
}
.el-pager li{
  height: 28px;
  line-height: 28px;
  min-width: 30px
}
</style>
